<template>
	<view>
		<!-- 商品详情加图片区域 -->
		<view class="commodity_content">
			<view  class="commodity_text">
				<!-- 图片区域 -->
				<view class="commodity_img">
					<image :src="imgUrl+messageString[2]" mode="" @error="messageString[2]='assets/zanwu.png'"></image>
				</view>
				<!-- 商品大小型号区域 -->
				<view class="commodity_color">
					<view><text>{{messageString[4]}}</text></view>										
						<view class="commodity_color1">
							<text>{{messageString[5]}}</text>
							<text>{{messageString[1]}}</text>
						</view>			
				</view>
			</view>
			<!-- 商品价格和数量区域 -->
			<view>
				<view class="commodity">
					<text>￥{{messageString[3]}}</text>
				</view>
				<text>X 1</text>
			</view>
		</view>
		<view class="fenge"></view>
		<view class="delivery_status">
			<view >
				<text>{{messageString[11]}}:{{messageString[9]}}</text>
			</view>
			<view>
				<text class="fuzhi">复制</text>
			</view>
		</view>
		<!-- 物流信息更新区域 -->
		<view>
			<uni-section type="line" padding>
				<uni-steps :options="list" active-color="#007AFF" :active="active" direction="column" />
			</uni-section>
		</view>
	</view>
</template>

<script>
	
	import store from '@/store/index.js'
	import { mapState, mapActions } from "vuex"
	import http from '../../until/http.js'
	import date from '../../static/time.js'
	export default {
			data() {
				return {
					// 获取图片的路径
					imgUrl:'http://localhost:8888/getImg?sort=',
					// active: 3,
					// 物流状态信息
					list:[],
				}
			},
			computed:{
				// 从vuex中拿取数据
				...mapState(['messageString']),
				messageString() {	
					return this.$store.state.messageString 
				},
			},
			onLoad() {
				this.getaddress();
				if(this.$store.state.messageString[13]=='待付款')
				{this.active=0}
				else if
				(this.$store.state.messageString[13]=='待收货')
				{this.active=1}
				else if
				(this.$store.state.messageString[13]=='待评价')
				{this.active=2}
				else if
				(this.$store.state.messageString[13]=='已完成')
				{this.active=3}
				else if
				(this.$store.state.messageString[13]=='售后')
				{this.active=4}
			},
			methods: {
				// 获取物流地址的信息
				getaddress(){
					http({
						url:'/getaddress',
						method:'get',
					}).then((res)=>{
						// 导出数据数据格式改变
						res.data.data.filter((v) => { 
						    v.desc =date.dateFn(v.desc);
						});
						this.list=res.data.data
						console.log(this.list)
					})
				}
			}
		}
</script>

<style lang="less" scoped>
	.fenge{
		background-color: #F8F8F8;
		height: 10px;
	}
	// 商品信息区域
	.commodity_text{
		display: flex;
		flex-direction:row;
		.commodity_img{
			width: 80px;
			height: 80px;
			padding-bottom: 10px;
			image{
				width: 100%;
				height: 100%;
				width: 80px;
				height: 80px;
			}
		}
		.commodity_color{
			padding: 5px 40px 5px 25px;
			display: flex;
			flex-direction:column;
			
			.commodity_color1{
				margin-top: 10px;
				color: #999999;
				display: flex;
				justify-content: flex-start;
			}
			
		}
	}
	.commodity_content{
		padding:10px;
		display: flex;
		flex-direction:row;
		justify-content: space-between;
	}
	// 快递
	.delivery_status{
		padding: 10px;
		display: flex;
		justify-content: space-between;
	}
	.fuzhi{
		color: #999;
		border: 1px solid #999;
	}
</style>
